<template>
    <div class="common courseDetail">
        <innerCommon 
            :location="location"
        >
            <template slot="left">
                <span>课程预览</span>
            </template>
            <div slot="right">
                <a-button type="primary" @click="returnBack()">返回</a-button>
            </div>
            <div slot="table" class="tableWrap">
                <ul v-if="courseInfo">
                    <li>
                        <span>课程名称：</span>
                        <span>{{courseInfo.title}}</span>
                    </li>
                    <li>
                        <span>专业方向：</span>
                        <span>{{courseInfo.majors[0].name}}</span>
                    </li>
                    <li>
                        <span>教学模块：</span>
                        <span>{{courseInfo.majors[1].name}}</span>
                    </li>
                    <li>
                        <span>授课教师：</span>
                        <span>{{courseInfo.teacher}}</span>
                    </li>
                    <li>
                        <span>教师简介：</span>
                        <span v-if="courseInfo.teacherInfo==null">暂无教师简介</span>
                        <span v-else >{{courseInfo.teacherInfo}}</span>
                    </li>
                    <li>
                        <span>加入权限：</span>
                        <a-slider 
                            style="width:50%"
                            :marks="marks" 
                            :step="null" 
                            :tooltipVisible="false"
                            :value="courseInfo.auth"
                            />
                    </li>
                    <li class="cover">
                        <span>课程封面：</span>
                        <img :src="courseInfo.cover" alt="">
                    </li>
                    <li style="margin-top:20px;">
                        <span>课程简介：</span>
                        <span v-html="courseInfo.courseInfo" class="courseInfo ql-editor"></span>
                    </li>
                    <li>
                        <span>课程目录：</span>
                        <span style="margin-top:10px;">  
                            <div class="cataBox" v-for="(item,index) in courseInfo.chapters" :key="index">
                                <div class="cataTitle" @click.prevent="currentCataId=item.id">
                                    <div>
                                        <b>第{{exchangeIndex(index+1)}}节</b>
                                        {{item.title}}
                                    </div>
                                </div>
                                <div class="taskList">
                                    <div class="taskBox" v-for="(value,taskIndex) in item.tasks" :key="taskIndex">
                                        <div class="taskItem">
                                            <span v-if="value.type==0">【视频】</span>
                                            <span v-else-if="value.type==1">【资料】</span>
                                            <span v-else-if="value.type==2">【习题】</span>
                                            <span v-else>【考试】</span>
                                            {{value.title}}
                                            <b class="isFree" @click="previewTask(value)" v-if="value.paperId">预览</b>
                                            <a-tag color="cyan" v-if="value.isFree==1">
                                                试看
                                            </a-tag>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </span>
                    </li>
                </ul>
            </div>
        </innerCommon>
        <!-- 视频预览模态框 -->
        <a-modal
            title="视频预览"
            :visible="videoModal"
            @cancel="videoModal=false"
            :destroyOnClose='true'
            :footer="null"
            width="800px"
            >
            <video :src="videoUrl" controls style="width:100%"></video>
        </a-modal>
    </div>
</template>
<script>
import {getCourseDetailApi} from "@/request/api"
import innerCommon from "@/components/common/innerCommon"
import {exchangeIndex} from "@/units/exchangeIndex.js"
export default {
    name:'courseDetail',
    components:{innerCommon},
    created(){
        this.location=[{
            name:"教学课堂管理",
            path:''
        },{
            name:"课程管理",
            path:'/course'
        },{
            name:"课程预览",
            path:'/courseDetail'
        }]
        this.courseId=this.$route.query.id
        this.init()
    },
    data(){
        return{
            exchangeIndex,
            location:[],
            courseId:'',
            courseInfo:null,
            marks:{
                33: 'VIP会员',
                66: '普通会员',
                100:{
                    style:{width:"100px"},
                    label:'注册用户'
                },
            },
            videoModal:false,
            videoUrl:''
        }
    },
    methods:{
        init(){
            this.getToken(getCourseDetailApi,{'courseId':this.courseId},res=>{
                this.courseInfo=res.data
                if(res.data.authentation=='5'){
                    this.courseInfo.auth=33
                }else if(res.data.authentation=='4,5'){
                    this.courseInfo.auth=66
                }else{
                    this.courseInfo.auth=100
                }
            })
        },
        returnBack(){
            this.$router.push({path:'/course',query:this.$route.query})
        },
        // 预览
        previewTask(item){
            if(item.type==2||item.type==3){//习题和考试
                    let routeData = this.$router.resolve({
                    path: "/paperPreview",
                    query: {id:item.paperId}
                });
                let width=800
                let left=parseInt((screen.availWidth/2) - (width/2))
                window.open(routeData.href, '_blank',"height=800, width="+width+", toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=50,left="+left);
            }else if(item.type==0){//视频
                this.videoModal=true
                this.videoUrl=item.resourceUrl
            }else{
                let width=800
                let left=parseInt((screen.availWidth/2) - (width/2))
                window.open(item.resourceUrl, '_blank',"height=800, width="+width+", toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=50,left="+left);
            }
        }
    }
}
</script>
<style lang="stylus" scoped>
.courseDetail
    ul
        list-style:none;
        position:relative
        li
            line-height:40px;
            align-items: flex-start;
            display:flex;
            span    
                &:nth-child(1)
                    width:90px;
                    display:inline-block;
                    font-weight:bold;
                &:nth-child(2)
                    display:inline-block;
                    width:80%;
            span.courseInfo
                border:1px solid #ddd;
                padding:10px;
                max-height:600px !important;
                overflow-y:scroll!important;
        li.cover
            position:absolute;
            top:0;
            right:15%;
            img 
                height:150px;
    .cataBox
        .cataTitle 
            background:#F5F7FA;
            margin-bottom:10px;
            line-height:40px;
            justify-content:space-between;
            display:flex;
            align-items:center; 
            b
                display:inline-block;
                width:120px;
                text-align:center;
        .taskList
            margin-bottom:10px;
            padding:0 40px;
            .taskBox
                margin:0;
                border-bottom:1px dashed #ddd;
                line-height:40px;
                justify-content:space-between;
                display:flex;
                align-items:center; 
                .taskItem
                    width:100%
                    .isFree
                        color:orange;
                        float:right;
                        display:inline-block;
                        margin-left:10px;
                        cursor pointer
</style>